<template>
  <div class="title">
    <div class="ti">
      <div class="ti_title">
        <span>{{detailinfo.bussinesName}}</span>
      </div>
      <div class="ti_img" @click="share_business">
        <img src="../../static/images/organize_team/fx.png" alt />
      </div>
    </div>
    <div class="yh">
      <div class="yh_item" v-for="(item,index) in detailinfo.bussinesLabel" :key="index">
        <img :src="item.icon" />
        <span>{{item.label}}</span>
      </div>
    </div>
    <div class="zd_type" v-if="show_organize">
      <div class="zdss">
        <yd-button style="width:1rem" type="warning" @click.native="organize('BANKER')">做东组队</yd-button>
      </div>
      <div class="zdss">
        <yd-button type="hollow" style="width:1rem" @click.native="organize('AA')">AA组队</yd-button>
      </div>
    </div>
    <div>
      <yd-accordion>
        <yd-accordion-item title="查看更多优惠" class="we">
          <img slot="icon" src="../../static/images/organize_team/yhj.png" alt />
          <div style="padding: .24rem;">
            <div class="hh" v-for="(item,index) in detailinfo.bussinesActivity" :key="index">
              <!-- <span
								class="a"
								:class="item.icon"
              >{{item.title}}</span>-->
              <span>{{item}}</span>
            </div>
          </div>
        </yd-accordion-item>
      </yd-accordion>
    </div>
    <div>
      <yd-popup v-model="share" position="center" width="90%">
        <div style="background-color:#fff;padding:0.2rem 0.4rem;height:10rem;">
          <div class="ons" @click="share = false">
            <yd-icon name="error"></yd-icon>
          </div>
          <div class="sds">
            <poster :share="share" :posterlist="posterdata" @sharelink="share_img"></poster>
          </div>
        </div>
      </yd-popup>
    </div>
  </div>
</template>

<script>
import poster from "@/components/poster/index";
import { mapGetters } from "vuex";

export default {
  name: "BusinessDetail",
  props: {
    detailinfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    sharedata: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      share: false
    };
  },
  components: {
    poster
  },
  computed: {
    ...mapGetters(["is_Invitation", "order_id", "share_id"]),
    /*
     * 用于判断是否显示组队和aa的按钮
     * 作者：gzt
     * 时间：2019-11-25 20:40:40
     */
    show_organize() {
      if (this.is_Invitation) {
        return false;
      }
      if (this.order_id != 0) {
        return false;
      }
      return true;
    },
    /*
     * 海报数据
     * 作者：gzt
     * 时间：2019-12-05 09:13:12
     */
    posterdata() {
      return [
        {
          type: "rect",
          top: 0,
          left: 0,
          background: "#f4f5f7",
          width: 550,
          height: 876
        },
        {
          type: "image",
          url: require("@/static/images/organize_team/hbt.jpg"),
          left: 0,
          top: 0,
          width: 550,
          height: 876,
          radius: 40
        },
        // 商户logo
        {
          type: "image",
          url: this.sharedata.shlogo,
          left: 85,
          top: 240,
          width: 382,
          height: 232
        },
        {
          type: "text",
          content: `长按或扫描二维码`,
          fontSize: 18,
          color: "#999999",
          top: 835,
          left: 60
        },
        {
          type: "text",
          content: `店铺名:`,
          fontSize: 22,
          top: 690,
          left: 220
        },
        {
          type: "text",
          content: this.sharedata.shname,
          fontSize: 22,
          top: 690,
          left: 304
        },
        {
          type: "text",
          content: `店铺地址:`,
          fontSize: 22,
          top: 770,
          left: 220
        },
        {
          type: "text",
          content: this.sharedata.shadress,
          fontSize: 22,
          top: 800,
          left: 220
        },
        {
          type: "text",
          content: `联系电话:`,
          fontSize: 22,
          top: 730,
          left: 220
        },
        {
          type: "text",
          content: this.sharedata.shiphone,
          fontSize: 22,
          top: 730,
          left: 334
        },
        {
          type: "qrcode",
          content: this.sharedata.shurl,
          background: "#fff",
          color: "#000",
          left: 60,
          top: 690,
          width: 135,
          height: 135
        }
      ];
    }
  },
  
  methods: {
    //分享达人进行分享
    share_business() {
      this.share = true;
    },
    share_img(img_url) {},
    /*
     * 组队的类型
     * 作者：gzt
     * 时间：2019-11-24 14:20:37
     */
    organize(type) {
      // 设置组队的类型
      this.$store.commit("ORGANIZE_TYPE", type);

      this.$router.push({
        path: "/team_detail"
      });
    }
  }
};
</script>

<style lang="less" >
.title {
  border-radius: 4px;
  background: #fff;
  padding: 0.2rem;
  text-align: left;
}

.ti {
  font-size: 0.35rem;
  font-weight: bold;
  display: flex;
}

.ti_title {
  flex: 1;
}

.ti_img {
  width: 0.5rem;
  display: flex;
  align-items: center;
}

.ti_img img {
  height: 0.35rem;
  width: 0.35rem;
}

.yh {
  display: flex;
  padding-top: 0.1rem;
  align-items: center;
}

.yh img {
  height: 0.28rem;
}

.yh_item {
  display: flex;
  align-items: center;
  width: 1.8rem;
}

.we img {
  height: 0.42rem;
  padding-right: 0.25rem;
}

.hh {
  margin-bottom: 0.1rem;
}

.a {
  padding: 0rem 0.1rem;
  border-radius: 5px;
  margin-right: 0.1rem;
  color: #fff;
  font-size: 0.2rem;
  line-height: 15px;
}

.h {
  background: rgb(211, 17, 136);
}

.m {
  background: rgb(206, 130, 15);
}

.z {
  background: rgb(35, 240, 240);
}

.s {
  background: rgb(241, 17, 17);
}
/* 组队 */
.zd_type {
  display: flex;
  padding-top: 0.2rem;
  justify-content: center;
}

.zdss {
  padding: 0rem 0.2rem;
}

// 海报
.sds {
  padding-top: 0.2rem;
}
.sds img {
  width: 100%;
}
.ons {
  position: absolute;
  right: 0.1rem;
}
</style>
